<template>
	<view class="content">
		<view class="box">
			<view :class="['icon'+index,current==index?'bianda':'bianxiao']" v-for="(i,index) in 4" @click="makeHaibao(index)" :key="index" class="animated"></view>
		</view>
		<view class="queding" @click="yaoqing">
			
		</view>
		
		<!-- 海报弹窗 -->
		<view class="yaoqinghaibao-box" v-if="haibaoShow">
			<image :src="piaoSrc" class="zuizhonghaibao"></image>
			<text class="tips-txt">长按或截图分享</text>
			<text class="tips-txt">即可邀请好友加入阵营</text>
			<view class="back-btn" @click="quitHaibao">
				<image :src="'../../static/zhenying/'+current+'/back.png'" class="pic"></image>
			</view>
		</view>
		<uqrcode ref="uQRCode" :text="fenxiangdizhi" class="erweima" />
		<canvas canvas-id="canvas" id="canvas" style="width:538px; height:696px;" class="canvas-hide" />
		
		
	</view>
</template>

<script>
	import DrawPoster from '../../components/u-draw-poster/index.js'
	export default {
		data() {
			return {
				name:'',
				wwid:'',
				userID:'',
				fenxiangdizhi:'',
				piaoSrc: '',
				current: -1,
				haibaoShow: false,
				zhenyingList: [{
						id: '创新',
						img: require('../../static/zhenying/chuangxin.png'),
						flag: 1
					},
					{
						id: '团队',
						img: require('../../static/zhenying/tuandui.png'),
						flag: 2
					},
					{
						id: '专业',
						img: require('../../static/zhenying/zhuanye.png'),
						flag: 3
					},
					{
						id: '准入',
						img: require('../../static/zhenying/zhunru.png'),
						flag: 4
					}
				],
			}
		},
		onShow() {
			this.name = uni.getStorageSync('name')
			this.wwid = uni.getStorageSync('wwid')
			this.userID = uni.getStorageSync('userID')
			// this.fenxiangdizhi = 'http://win.v2code.cn/#/pages/fenxiang/fenxiang?userID='+this.userID
		},
		methods: {
			quitHaibao(){
				this.fenxiangdizhi = ''
				this.haibaoShow = false
				this.piaoSrc = ''
			},
			makeHaibao(index){
				this.current = index
				this.fenxiangdizhi = 'http://win.v2code.cn/#/pages/fenxiang/fenxiang?userID='+this.userID+'&current='+index+'&zhenying='+this.zhenyingList[index].id
				
			},
			async yaoqing() {
				if(this.current==-1){
					uni.showToast({
						title:'请选择阵营',
						icon:'error',
						mask:true
					})
					return false
				}
				
				console.log('邀请地址', this.fenxiangdizhi)
				this.haibaoShow = true
				this.$refs.uQRCode.toTempFilePath({
					success: res => {
						console.log(res)
						this.erweima = res
						
						
					}
				})
				
				
				const dp = await DrawPoster.build("canvas")
				dp.canvas.width = 538
				dp.canvas.height = 696
				dp.draw(async (ctx) => {
					await ctx.drawImage('/static/zhenying/'+this.current+'/qrcode-bg.png', 0, 0, 538, 696);
				})
				dp.draw(async (ctx) => {
					console.log('this.erweima',this.erweima)
					await ctx.drawImage(this.erweima.tempFilePath, 347, 530, 126, 126);
				})
				const result = await dp.awaitCreate();
				// console.log("draw绘制状况:", result);
				let posterImgUrl = await dp.createImagePath();
				// console.log("绘制生成本地地址:", posterImgUrl);
				this.piaoSrc = posterImgUrl
				
			},
		}
	}
</script>

<style scoped>
	.canvas-hide {
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		z-index: -9999;
		opacity: 0;
		letter-spacing: 5px;
	}
page{
	background: url(../../static/jifen/bg6.jpg) no-repeat center top;
	background-size: 100% auto;
}
.box{
	width: 700rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 333rpx;
}
.icon0{
	width: 350rpx;
	height: 384rpx;
	background: url(../../static/jifen/chuangxin.png) no-repeat center center;
	background-size: 100% 100%;
}
.bianda{
	transition: all 0.3s ease-out;
	 transform: scale(1.1);
}
.bianxiao{
	transition: all 0.3s ease-out;
	 transform: scale(1);
}
.icon1{
	width: 350rpx;
	height: 384rpx;
	background: url(../../static/jifen/tuandui.png) no-repeat center center;
	background-size: 100% 100%;
}
.icon2{
	width: 350rpx;
	height: 384rpx;
	background: url(../../static/jifen/zhenying.png) no-repeat center center;
	background-size: 100% 100%;
}
.icon3{
	width: 350rpx;
	height: 384rpx;
	background: url(../../static/jifen/zhunru.png) no-repeat center center;
	background-size: 100% 100%;
}
.queding{
	width: 366rpx;
	height: 136rpx;
	background: url(../../static/jifen/queding.png) no-repeat center center;
	background-size: 100% 100%;
	margin-top: 0;
}


.yaoqinghaibao-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 10;
		background: rgba(0, 0, 0, 0.5);
	}
	.erweima {
		opacity: 0;
		// transform: scale(0.1);
		position: fixed;
		top: 0;
		left: 0;
		z-index: -90;
	}
	.zuizhonghaibao{
		width: 538rpx;
		height: 696rpx;
		margin-top: 130rpx;
	}
	.tips-txt{
		font-size: 30rpx;
		color: #fff;
		line-height: 40rpx;
	}
	.tips-txt:nth-of-type(1){
		margin-top: 46rpx;
	}
	.back-btn{
		width: 294rpx;
		height: 110rpx;
		margin-top: 64rpx;
	}
	.pic{
		width: 100%;
		height: 100%;
		display: block;
	}
</style>
